<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="mycanvase.js"></script>
		
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			
			canvas {
				border: none;
			}
			
			canvas:focus{
				outline: none;
			}
			
		
		</style>
		
	</head>
	<body>
		
		<canvas id="canvase01" tabindex="0"></canvas>
		
		<script>
			
			var mycanvase = new MyCanvase("canvase01", true)
			// drawLine(mycanvase.ctx, {x:50, y:50},{x:100,y:300}, "solid  2px red")
			var rect01 = new RectShape(mycanvase, 200, 400)
			var rect02 = new RectShape(mycanvase, 150, 230)
		
			mycanvase.add(rect01)
			mycanvase.add(rect02)
			
			
			var curve01 = new HoriCurveShape(mycanvase, {x:500, y:800},{x:100, y:600})
			curve01.drawCtr = true
			
			mycanvase.add(curve01)
			
			
			
			var curve02 = new HoriCurveShape(mycanvase, {x:100, y:400}, {x:300, y:800}, "dash 2px green")
			curve02.drawCtr = true
			
			mycanvase.add(curve02)
			
			var test01 = new TextShape(mycanvase, 130, 200)
			test01.textColor="rgba(255,100,40,0.5)"
			mycanvase.add(test01)
			
			
			
			var test02 = new TextShape(mycanvase, 200, 300)
			test02.textColor="rgba(255,100,40,0.5)"
			
			
			test02.border="none"
			test02.borderLeft="solid 2px green"
			test02.borderRight="solid 2px green"
			test02.borderBottom="solid 2px red"
			test02.borderTop="solid 2px red"
			
			
			mycanvase.add(test02)
			
			
			
		</script>
	</body>
</html>